<!-- eslint-disable complexity -->
<template>
  <div class="map-custom">
    <div class="back-btn" @click="backFun" v-show="isShow.length > 1">返回</div>
    <echarts-temp
      ref="echart"
      :options="options"
      :isClick="true"
      @itemClick="itemClick"
    ></echarts-temp>
  </div>
</template>
<script>
import mapJsonMap from '@assets/map/citysHash.js'
import geoCoordMap from '@assets/map/geoCoordMap.js'
import { noRound } from '@/utils/index.js'
export default {
  name: 'EmploymentIndustryFive',

  data() {
    return {
      options: {},
      mapName: '河南省',
      mapData: [],
      isShow: ['河南省'],
      scatterData: [],
      dataSeries: [
        {
          name: '郑州市',
          symbol:
            'image://'
        },
        {
          name: '洛阳市',
          symbol:
            'image://'
        }
      ],
      dataBars: []
    }
  },
  mounted() {
    this.drawMap(this.mapName)
  },
  methods: {
    async drawMap(mapName) {
      this.mapData = []
      this.scatterData = []
      const jsonData = require(`@/assets/henan/${mapName}.json`)
      this.$echarts.registerMap(this.mapName, jsonData)
      jsonData.features.forEach(item => {
        // 地图数据
        this.mapData.push({
          name: item.properties.name,
          value: noRound(Math.random() * 118)
        })
        // 散点图数据
        let symbol =
          'image://'
        this.scatterData.push({
          name: item.properties.name,
          value: geoCoordMap[item.properties.name],
          symbolSize:
            this.dataSeries.findIndex(
              jitem => jitem.name === item.properties.name
            ) !== -1
              ? 20
              : 20,
          symbol:
            this.dataSeries.findIndex(
              jitem => jitem.name === item.properties.name
            ) !== -1
              ? this.dataSeries.find(
                  jitem => jitem.name === item.properties.name
                ).symbol
              : symbol,
          symbolOffset: [0, 0]
        })
        this.dataBars.push({
          name: 100,
          coords: [
            geoCoordMap[item.properties.name],
            [
              geoCoordMap[item.properties.name][0],
              geoCoordMap[item.properties.name][1] + 0.1
            ]
          ]
        })
      })
      this.optionFun()
    },
    itemClick(params) {
      this.drawMap(params.name)
      this.isShow.push(params.name)
      console.log(params, '参数详情')
    },
    backFun() {
      this.drawMap(this.isShow[this.isShow.length - 2])
      this.isShow.pop()
    },
    optionFun() {
      let mytextStyle = {
        color: '#fff', // 文字颜色
        fontStyle: 'normal', // italic斜体  oblique倾斜
        fontWeight: 'normal', // 文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
        fontFamily: 'sans-serif', // 字体系列
        fontSize: 18 // 字体大小
      }
      this.options = {
        tooltip: {
          backgroundColor: 'rgba(2,69,152, 0)',
          formatter: function(params) {
            return `<div style="border-style: solid;
              transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
              border-width: 0px;
              border-color: #333333;
              border-radius: 4px;
              color: #fff;
              font-style: normal;
              font-variant: normal;
              font-weight: normal;
              font-stretch: normal;
              font-size: 14px;
              font-family: 'Microsoft YaHei';
              line-height: 21px;
              margin: 0;
              padding: 20px 20px;
              opacity: 0.7;
              background: linear-gradient(white, white) left top, linear-gradient(white, white) left top, linear-gradient(white, white) right top, linear-gradient(white, white) right top,
                linear-gradient(white, white) left bottom, linear-gradient(white, white) left bottom, linear-gradient(white, white) right bottom, linear-gradient(white, white) right bottom;
              background-color: #024598;
              background-repeat: no-repeat;
              background-size: 1px 24px, 24px 1px;">${params.name}:${params.value} <br />
            </div>`
          }
        },
        visualMap: [
          {
            show: true,
            type: 'continuous',
            min: 0,
            max: 100,
            right: 1,
            top: 'bottom',
            calculable: true,
            itemWidth: 12,
            itemHeight: 100,
            inRange: {
              color: ['#116AE0', '#3C93FA'] // 蓝绿
            },
            textStyle: {
              color: '#0091B0',
              fontSize: 12
            }
          }
        ],
        // 设置地图立体效果
        geo: {
          // id: 'geoMap',
          map: this.mapName,
          roam: false,
          zlevel: 1,
          zoom: 1.2,
          label: {
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            normal: {
              show: false, // 是否在普通状态下显示标签。
              textStyle: mytextStyle // 普通状态下的标签文本样式。
            },
            emphasis: {
              show: false, // 是否在高亮状态下显示标签。
              textStyle: mytextStyle // 高亮状态下的标签文本样式。
            }
          },
          itemStyle: {
            // 地图区域的多边形 图形样式
            normal: {
              borderColor: '#052783',
              borderWidth: 1,
              areaColor: '#052783',
              shadowColor: '#052783',
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 20
            },
            emphasis: {
              borderWidth: 1,
              areaColor: '#052783',
              borderColor: '#052783'
            }
          }
          // 对不同区块进行着色
          // regions: this.buildRegions()
        },
        series: [
          {
            type: 'map',
            zlevel: 3,
            map: this.mapName,
            zoom: 1.2,
            label: {
              show: true,
              color: '#fff',
              fontSize: 12,
              formatter: params => {
                return '{a|' + params.name + '}\n{b|' + params.value + '}'
              },
              rich: {
                a: {
                  fontSize: 12,
                  padding: [6, 0, 0, 0]
                },
                b: {
                  height: 16,
                  fontSize: 14,
                  padding: [0.5, 10, 4, 10],
                  backgroundColor: '#4976B0',
                  borderRadius: 12
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#5AC3EB',
                borderWidth: 1
              },
              emphasis: {
                areaColor: 'rgba(39, 196, 153, 1)'
              }
            },
            data: this.mapData
          },
          {
            type: 'lines',
            zlevel: 5,
            effect: {
              show: false,
              // period: 4, //箭头指向速度，值越小速度越快
              // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              // symbol: 'arrow', //箭头图标
              // symbol: imgDatUrl,
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              width: 18, // 尾迹线条宽度
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0,245,253,1)' // 0% 处的颜色
                  },
                  {
                    offset: 0.2,
                    color: 'rgba(0,245,253,1)' // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: 'rgba(0,245,253,.5)' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: 'rgba(0,245,253,.5)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,245,253,1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              opacity: 0.9, // 尾迹线条透明度
              curveness: 0 // 尾迹线条曲直度
            },
            label: {
              show: true,
              position: 'end',
              normal: {
                show: true,
                textStyle: {
                  color: '#00F5FD'
                }
              }
              // formatter: function(params){
              //   console.log(params)
              // }
            },
            silent: true,
            // selectedMode: 'single',
            data: this.dataBars
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            // 自定义图片的 位置（lng, lat）
            data: this.scatterData,
            // 自定义图片的 大小
            zlevel: 3
          }
        ]
      }
    },
    buildRegions() {
      const arr = []
      this.mapData.forEach(item => {
        const color = this.buildColor(item.value)
        arr.push({
          name: item.name,
          itemStyle: {
            normal: {
              areaColor: color
            },
            emphasis: {
              areaColor: color
            }
          }
        })
      })
      return arr
    },
    buildColor(num) {
      let color = 'rgba(0, 183, 240, 0.2)'
      if (num >= 0 && num < 20) {
        color = 'rgba(0, 183, 240, 0.8)'
      } else if (num >= 20 && num < 40) {
        color = 'rgba(18, 133, 242, 0.8)'
      } else if (num >= 40 && num < 60) {
        color = 'rgba(14, 100, 192, 0.8)'
      } else if (num >= 60 && num < 80) {
        color = 'rgba(17, 77, 165, 0.8)'
      } else if (num >= 80 && num < 100) {
        color = 'rgba(11, 67, 152, 0.8)'
      } else {
        color = 'rgba(8, 57, 133, 0.8)'
      }
      return color
    }
  }
}
</script>
<style lang="scss" scoped>
.map-custom {
  position: relative;
  height: 100%;
  .back-btn {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 20px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #fff;
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    user-select: none;
  }
}
</style>
